import React, { Component } from 'react';
import * as events from './events';
import './App.css';

export default class App extends Component {

  // 只读
  state = {
    inputValue: '',
    list: [], // 原数组
    showingList: [], // 正在展示的数组
    editingId: -1,
  };

  idCount = 0;
  editValue = '';

  // view
  createList () {
    return this.state.showingList.map((item) => (
      <li key={ item.id }>
        {
          this.state.editingId === item.id
          ? <>
              <input 
                type="text" 
                defaultValue={ item.value } 
                onChange={ events.onEditChange.bind(this) }
              />
              <button onClick={ events.onEditOk.bind(this, item.id) }>确认</button>
            </>
          : <>
              { item.value }
              <button onClick={ events.onEdit.bind(this, item.id) }>修改</button>
            </>
        }
        <button onClick={ events.onDelete.bind(this, item.id) }>删除</button>
      </li>
    ));
  }

  // view
  render () {
    return (
      // 空标签 作用和vue中的template一致
      <>
        <input 
          type="text" 
          onChange={ events.onChange.bind(this) }
          value={ this.state.inputValue }
        />
        <button onClick={ events.onCreate.bind(this) }>新增</button>
        <button onClick={ events.onSearch.bind(this) }>查询</button>
        <ul>{ this.createList() }</ul>
      </>
    );
  }

}
